import React, { useEffect, useState } from 'react'
import { Table, Button, Modal,notification } from 'antd';
import axios from 'axios';

import { DeleteOutlined, EditOutlined, ExclamationCircleOutlined, UploadOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
const { confirm } = Modal;
export default function NewsDraft() {
  const [dataSource, setdataSource] = useState([])
  const navigate = useNavigate()
  const { username } = JSON.parse(localStorage.getItem('token'))
  useEffect(() => {
    axios.get(`http://localhost:8000/news?author=${username}&auditState=0&_expand=category`).then(res => {
      const list = res.data
      console.log(list);
      setdataSource(list)
    })
  }, [username])
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      render: (id) => {
        return <b>{id}</b>
      }
    },
    {
      title: '新闻标题',
      dataIndex: 'title',
      render: (title, item) => {
        return <a href={`/news-manage/preview/${item.id}`}>{title}</a>
      }
    },
    {
      title: '作者',
      dataIndex: 'author'
    },
    {
      title: '分类',
      dataIndex: 'category',
      render: (category) => {
        return category.title
      }
    },
    {
      title: '操作',
      render: (item) => {
        return <div>
          <Button type="danger" shape="circle" icon={<DeleteOutlined />} onClick={() => showDeleteConfirm(item)} />
          <Button type="circle" shape="circle" icon={<EditOutlined />} onClick={() => {
            navigate(`/news-manage/update/${item.id}`)
          }} />
          <Button type="primary" shape="circle" icon={<UploadOutlined />} onClick={() => handleCheck(item.id)} />

        </div>
      }
    }
  ];


  const handleCheck = (id) => {
    axios.patch(`/news/${id}`, {
      auditState: 1
    }).then(res => {
      navigate('/audit-manage/list')
      notification.info({
        message: `通知`,
        description:
          `您可以到${'审核列表'}中查看您的新闻`,
        placement: "bottomRight"
      });
    })
  }


  const showDeleteConfirm = (item) => {
    confirm({
      title: '你确定要删除吗？',
      icon: <ExclamationCircleOutlined />,
      // content: 'Some descriptions',
      okText: 'Yes',
      okType: 'danger',
      cancelText: 'No',
      onOk() {
        // console.log('OK');
        deleteMethod(item)
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  };
  const deleteMethod = (item) => {
    // console.log(item);
    // 当前页面同步状态 + 后端同步

    setdataSource(dataSource.filter(data => data.id !== item.id))
    axios.delete(`/news/${item.id}`)

  }
  return (
    <div>
      <Table dataSource={dataSource} columns={columns} pagination={{
        pageSize: 5
      }}
        rowKey={item => item.id}
      />;

    </div>
  )
}
